<template>
	<view class="uni_box home">
		<navbar title='团购'>
		</navbar>
		<view class="content">
			<u-sticky offset-top="0">
				<view class="tuanone">
					<view class="tsou">
						<image class="icon_ss" src="@/pages_client/static/img/icon_ss.png" />
						<u-input class="iteminput" input-align="left" v-model="keywords" type="text" placeholder='搜索团购名称或关键词' />
						<view class="souname" @click="getClear">搜索</view>
					</view>
					<u-tabs v-if="classlist!=''" @change="change" :list="classlist" active-color="#1A1A1A" inactive-color="#666666"  :is-scroll="true" :current="current"></u-tabs>
				</view>
			</u-sticky>
			<view class="list">
				<view class="item" v-for="(item,index) in list" :key="index" @click.stop="goumai(item)">
					<image class="shopimg" :src="item.image" mode="aspectFill" />
					<view class="iright">
						<text class="rname">{{item.title}}</text>
						<view class="rdi" v-if="item.shop_data!=''">
							<image class="icon_dw" src="@/pages_client/static/img/icon_dw.png" />
							<text class="ju">{{item.shop_data.distance}}</text>
							<text class="juli txt">{{item.shop_data.shop_des}}</text>
						</view>
						<view class="mian" v-if="item.taps">
							<view class="mianitem" v-for="(i,ind) in item.taps" :key="ind">{{i}}</view>
						</view>
						<view class="jiabot">
							<text class="jia" v-if="item.price!=0">¥<text class="jianum">{{ item.price }}</text></text>
							<view class="goumai" :class="item.price==0?'mfl':''" @click.stop="goumai(item)">{{ item.price==0?'免费领取':'购买' }}</view>
						</view>
					</view>
				</view>
				<u-loadmore :status="status" @loadmore="loadmore" />
			</view>
		</view>
		<MenOrderPop v-if="menpopshow" :latitude="latitude" :longitude="longitude" :menpopshow="menpopshow" @getxuanmen="getxuanmen" @closemenpop="closemenpop" :tlist="tlist"></MenOrderPop>
	</view>
</template>

<script>
import MenOrderPop from '@/components/MenOrderPop/MenOrderPop'
	export default {
		components: {
			MenOrderPop
		},
		data() {
			return {
				keyword:'',
				tablist: [{
					name: '精选'
				}, {
					name: '美容养颜'
				}, {
					name: '水光补水'
				}, {
					name: '美容养颜'
				}, {
					name: '水光补水'
				}, {
					name: '美容养颜'
				}, {
					name: '水光补水'
				}],
				current: 0,
				menpopshow:false,//门店选择
				classlist:[],
				classitem:'',
				tpage:1,
				tuanlist:[],
				rexiaolist:[],
				list: [],
				page: 1,
				limit: 10,
				last_page: 1,
				status: "loadmore",
				latitude:'',
				longitude:'',
				keywords:'',
				tlist:[],
				shopid:''
			}
		},
		onLoad(option) {
			if(option.latitude){
				this.latitude = option.latitude
			}
			if(option.longitude){
				this.longitude = option.longitude
			}
			this.getcate()
		},
		onShow() {
		},
		onReachBottom: function () {
			this.loadmore();
		},
		methods: {
			async getcate() {
				let res = await this.$u.api.tuangetCate({
				});
				console.log(res)
				this.classlist = res
				if(this.classitem==''||!this.classitem){
					this.classitem = res[0]
				}
				this.getList();//数据合集
			},
			async getList(){//列表数据
				let res = await this.$u.api.tuangetList({
					cid:this.classitem.id,
				  	page:this.page,
					lat:this.latitude,
					lng:this.longitude,
					keywords:this.keywords,
					// shop_id:'2'
				});
				    this.last_page = res.lastpage
					let list = res.list;
					this.list = this.page == 1 ? list : [...this.list, ...list];	
					if(res.list==''||Number(list.length)<Number(this.limit)||Number(this.page)>Number(this.last_page)){
						this.status = 'nomore';
					}
				
			},
			loadmore() {
				let page = this.page;
				// let last_page = this.last_page;
				if (this.status == 'loadmore') {
					this.page++;
					this.getList();
				}
			},
			getClear(){
				this.list = []
				this.page = 1,
				this.status= "loadmore"
				this.getList()
			},
			change(e){
				this.current = e
				this.classitem = this.classlist[e]
				this.getClear()
			},
			async goumai(item){
				this.shopid = item.id
				let res = await this.$u.api.getShopList({
					id:item.id,
					latitude:this.latitude,
					longitude:this.longitude
				});
				let data = res
				for(let i in data){
					data[i].isselect = false
				}
				this.tlist = data
				if(this.tlist!=''){
					this.menpopshow = true
				}else{
					this.$u.toast("暂无可用门店");
				}
			},
			gouDetail(item){
				this.navrouter('/pages_client/twoPage/TuanDetail?type=2'+'&id='+item.id)
			},
			closemenpop(){
				this.menpopshow = false
			},
			getxuanmen(e){
				this.closemenpop()
				this.navrouter('/pages_client/twoPage/TuanDetail?type=2'+'&id='+this.shopid+'&shop_id='+e.id+'&longitude='+this.longitude+'&latitude='+this.latitude)
			},
		}
	}
</script>

<style lang="scss" scoped>
	page{
		background-color: #f9f9f9;
	}
	.content{
		background-color: #f9f9f9;
		.tuanone{
			background-color: #fff;
			padding: 15rpx 30rpx;
			.tsou{
				display: flex;
				flex-direction: row;
				background: #F3F3F3;
				border-radius: 16rpx;
				padding: 6rpx 20rpx 6rpx 30rpx;
				align-items: center;
				margin-bottom: 14rpx;
				.icon_ss{
					width: 32rpx;
					height: 32rpx;
					margin-right: 10rpx;
				}
				.iteminput{
					margin-right: 20rpx;
				}
				.souname{
					margin-left: auto;
					height: 58rpx;
					background: #483C38;
					border-radius: 16rpx;
					display: flex;
					align-items: center;
					justify-content: center;
					font-weight: bold;
					font-size: 28rpx;
					color: #F9F9F9;
					width: 120rpx;
				}
			}
		}
	}
	.list{
		padding: 20rpx 10rpx;
		.item{
			background: #FFFFFF;
			border-radius: 24rpx;
			padding: 20rpx;
			display: flex;
			flex-direction: row;
			width: 100%;
			margin-bottom: 20rpx;
			.shopimg{
				width: 240rpx;
				height: 240rpx;
				border-radius: 10rpx;
				margin-right: 15rpx;

			}
			.iright{
				width: 62%;
				display: flex;
				flex-direction: column;
				.rname{
					font-weight: bold;
					font-size: 26rpx;
					color: #333333;
					display: block;
					margin-top: 5rpx;
				}
				.rdi{
					display: flex;
					flex-direction: row;
					flex-direction: row;
					align-items: center;
					.icon_dw{
						width:22rpx;
						height: 24rpx;
						margin-right: 8rpx;

					}
					.ju{
						font-weight: 500;
						font-size: 24rpx;
						color: #999999;
					}
					.juli{
						margin-left: auto;
						font-weight: 500;
						font-size: 24rpx;
						color: #999999;
						display: inline-block;
						max-width: 70%;
					}
				}
				.mian{
					// width: 75rpx;
					// height: 30rpx;
					
					display: flex;
					align-items: center;
					// justify-content: center;
					
					font-weight: 500;
					font-size: 18rpx;
					color: #999999;
					margin-top: 8rpx;
					.mianitem{
						border-radius: 5rpx;
						border: 1rpx solid #999999;
						padding: 4rpx 20rpx;
						margin-right: 20rpx;
					}
				}
				.jiabot{
					margin-top: auto;
					display: flex;
					flex-direction: row;
					align-items: flex-end;
					.jia{
						font-weight: bold;
						font-size: 28rpx;
						color: #FF7C41;
						.jianum{
							font-size: 36rpx;
							position: relative;
							margin-left: 4rpx;
						}
					}
					.goumai{
						margin-left: auto;
						width: 164rpx;
						height: 68rpx;
						background: #FF7C41;
						border-radius: 16rpx;
						display: flex;
						align-items: center;
						justify-content: center;
						font-weight: 500;
						font-size: 26rpx;
						color: #FFFFFF;
					}
					.mfl{
						background: #e52020;
					}
				}
				
			}
		}
	}
</style>
